<template>
  <div class="home">
    <v-Head></v-Head>
    <div class="announcement">
      <div class="left">
        <i class="fa fa-volume-up"></i>
        最新公告
      </div>
      <template>
        <el-carousel
          height="60px"
          style="width: 100%"
          direction="vertical"
          :autoplay="true"
          indicator-position="none"
        >
          <el-carousel-item v-for="(index, item) in acdata.data" :key="item">
            <h3 class="medium">
              <span class="topone">.{{ index.communityname }}</span>
              <span class="toptwo">.{{ index.content }}</span>
              <span class="topthree">.{{ index.createtime }}</span
              ><span class="topfour" @click="open">.更多</span>
            </h3>
          </el-carousel-item>
        </el-carousel>
      </template>
      <div class="right"></div>
    </div>
    <div class="caard">
      <div class="caard-list">
        <div class="left">
          <i class="fa fa-user"></i>
        </div>
        <div class="right">
          <h1>{{ tot[0] }}</h1>
          <p>系统用户数</p>
        </div>
      </div>
      <div class="caard-list">
        <div class="left">
          <i class="fa fa-file-text-o"></i>
        </div>
        <div class="right">
          <h1>{{ tot[1] }}</h1>
          <p>计费订单数量</p>
        </div>
      </div>
      <div class="caard-list">
        <div class="left">
          <i class="fa fa-car"></i>
        </div>
        <div class="right">
          <h1>{{ tot[2] }}</h1>
          <p>车位总量</p>
        </div>
      </div>
      <div class="caard-list">
        <div class="left">
          <i class="fa fa-pencil-square-o"></i>
        </div>
        <div class="right">
          <h1>{{ tot[3] }}</h1>
          <p>用户反馈数量</p>
        </div>
      </div>
    </div>
    <div class="ec">
      <div class="ec-top">
        <div id="one"></div>
        <div id="two"></div>
        <div id="three"></div>
      </div>
      <div class="ec-bottom">
        <div id="four"></div>
        <div class="ec5">
          <div class="txtop">
            <el-table ref="filterTable" :data="tableData" style="width: 100%">
              <el-table-column
                prop="repaircontent"
                label="维修内容"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="createtime"
                label="保修时间"
                :show-overflow-tooltip="true"
                :formatter="formatDate"
              >
              </el-table-column>
              <el-table-column
                prop="resultstatus"
                label="状态"
                filter-placement="bottom-end"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="
                      scope.row.resultstatus === '已处理'
                        ? 'success'
                        : 'warning'
                    "
                    disable-transitions
                    >{{ scope.row.resultstatus }}</el-tag
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagbottom">
            <el-pagination
              :page-size="size"
              layout="prev, pager, next"
              :total="total"
              @current-change="nextgo"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "../components/header";
import moment from "moment";
import * as echarts from "echarts";
export default {
  name: "index",
  components: {
    vHead,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      size: 4,
      page: 1,
      acdata: "", //通告
      tot: ["", "", "", ""], // 仪表盘
      ecpai: [],
      car1: [],
      car2: [],
      car3: [],
      radar: [],
      max: null,
      logData: [],
      days: [],
      nums:[]
    };
  },
  created() {
    this.getAnnouncement(); //轮播公告
    this.getMeter(); //仪表盘
    this.getMessage(); //订单
    this.getOrder(); //车位
    this.getBack(); //反馈
    this.getEcharts1(); //饼图
    this.getEcharts2(); //柱状图
    this.getEcharts3(); //雷达图
    this.abnormal(); // 报修
    this.log(); //登录日志
  },
  mounted() {
    try {
      this.echarts();
    } catch (err) {
      console.log(err);
    }
  },
  methods: {
    open() {
      //跳转页面
      this.$router.push({
        path: "/service/postMessage",
      });
    },
    // ==================================
    //接口

    //公告接口
    async getAnnouncement() {
      await this.$axios
        .get("/poster/getPosterData", {
          params: {
            currPage: 0,
            pageNum: 100,
          },
        })
        .then((res) => {
          if (res.data) {
            // console.log(res);
            this.acdata = res.data;
            // console.log(this.acdata);
          }
        });
    },
    // 仪表盘接口
    async getMeter() {
      //用户
      await this.$axios
        .get("/users/getUsersData", {
          params: {
            currPage: 0,
            pageNum: 4,
          },
        })
        .then((res) => {
          if (res.data.data) {
            // this.tot[0].$set=res.data.total
            this.$set(this.tot, 0, res.data.total);
          }
        });
    },
    async getMessage() {
      // 订单
      await this.$axios
        .get("/cost/getPayMessage", {
          params: {
            currPage: 0,
            pageNum: 4,
          },
        })
        .then((res) => {
          if (res.data.data) {
            this.$set(this.tot, 1, res.data.total);
          }
        });
    },
    async getOrder() {
      // 车位
      await this.$axios
        .get("/parking/getParkOrder", {
          params: {
            currPage: 0,
            pageNum: 4,
          },
        })
        .then((res) => {
          if (res.data.data) {
            this.$set(this.tot, 2, res.data.total);
          }
        });
    },
    async getBack() {
      // 反馈
      await this.$axios
        .get("/poster/getFeedBack", {
          params: {
            currPage: 0,
            pageNum: 4,
          },
        })
        .then((res) => {
          if (res.data.data) {
            this.$set(this.tot, 3, res.data.total);
          }
        });
    },
    // 饼图接口
    async getEcharts1() {
      let data = ["A", "B", "C", "D"];
      for (let i = 0; i < 4; i++) {
        await this.$axios
          .get("/house/searchList", {
            params: {
              unitname: data[i],
              currPage: 1,
              pageNum: 4,
            },
          })
          .then((res) => {
            // console.log(res)
            this.ecpai.push({ value: res.data.total });
            console.log(this.ecpai);
          });
      }
      // console.log(this.ecpai)
      this.echarts();
    },
    // 柱状图接口
    async getEcharts2() {
      for (let i = 0; i < 4; i++) {
        let data = ["A", "B", "C", "D"];
        await this.$axios
          .get("/parking/getParkData", {
            params: {
              parkname: data[i],
              currPage: 0,
              pageNum: 4,
            },
          })
          .then((res) => {
            this.car1.push(res.data.total);
          });
      }
      for (let i = 0; i < 4; i++) {
        let data = ["A", "B", "C", "D"];
        await this.$axios
          .get("/parking/getParkData", {
            params: {
              parkname: data[i],
              currPage: 0,
              pageNum: 4,
              parkstatus: 1,
            },
          })
          .then((res) => {
            this.car2.push(res.data.total);
          });
      }
      for (let i = 0; i < 4; i++) {
        let data = ["A", "B", "C", "D"];
        await this.$axios
          .get("/parking/getParkOrder", {
            params: {
              parkname: data[i],
              currPage: 0,
              pageNum: 4,
              orderstatus: 1,
            },
          })
          .then((res) => {
            this.car3.push(res.data.total);
          });
      }
      // console.log(this.car1, this.car2, this.car3);
      this.echarts();
    },
    // 雷达图接口
    async getEcharts3() {
      for (let i = 7; i < 13; i++) {
        await this.$axios
          .get("/cost/getCostData", {
            params: {
              c_id: i,
              currPage: 0,
              pageNum: 4,
            },
          })
          .then((res) => {
            this.radar.push(res.data.total);
            if (i == 12) {
              this.max = Math.max(...this.radar);
            }
          });
      }
      this.echarts();
    },
    // 报修接口
    async abnormal() {
      await this.$axios
        .get("/poster/getRepairData", {
          params: {
            currPage: this.page - 1,
            pageNum: 4,
          },
        })
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
          console.log(res);
          for (let i = 0; i < this.tableData.length; i++) {
            // console.log(this.tableData[i].resultstatus)
            if (this.tableData[i].resultstatus == 1) {
              this.tableData[i].resultstatus = "已处理";
            } else {
              this.tableData[i].resultstatus = "待处理";
            }
          }
        });
    },
    //日志接口
    // /users/getLoginMonth
    async log() {
      await this.$axios.get("/users/getLoginMonth").then((res) => {
        console.log(res.data);
        this.logData = res.data;
        this.logs();
      });
    },
    //===================================
    //处理函数
    // 日期格式转换
    formatDate(row, column, cellValue) {
      return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
    },
    logs() {
      let XDatas = [];
      for (let i = 0; i < this.logData.length; i++) {
        XDatas[i] = moment(this.logData[i].createtime).format("MM-DD");
      }
      let charCount = {};
      for (let i of XDatas) {
        if (charCount[i]) {
          charCount[i]++; 
        } else {
          charCount[i] = 1; 
        }
      }
      // console.log(charCount);
      let chars = [];
      let counts = [];
      for (let i in charCount) {
        chars.push(i); // 存日期
        counts.push(charCount[i]); // 存数
      }
      // console.log('1111111111111111111',chars, counts);
      let MM = Number(moment(this.logData[0].createtime).format("MM"))
      let YYYY = Number(moment(this.logData[0].createtime).format("YYYY"))
      let day = new Date(YYYY, MM, 0).getDate()
      console.log(YYYY,MM,day);
      for (let i = 0; i < day; i++) {
        if(chars[i]){
          console.log(chars[i],i);
        }else{
          chars[i] = `${MM}-${i+1}`
          counts[i] = 0
        }
      }
      this.days= chars
      this.nums = counts
      // console.log(chars, counts);
    },
    nextgo(res) {
      console.log(res);
      this.page = res;
      this.abnormal();
    },

    //echarts图表
    echarts() {
      //     // var myChart = echarts.init(document.getElementById('main'));
      var myChart1 = echarts.init(document.getElementById("one"));
      var myChart2 = echarts.init(document.getElementById("two"));
      var myChart3 = echarts.init(document.getElementById("three"));
      var myChart4 = echarts.init(document.getElementById("four"));
      //   var myChart5 = echarts.init(document.getElementById("five"));
      //   // 基于准备好的dom，初始化echarts实例
      //   // 绘制图表
      //   // 饼图带数据视图，还原，保存为图片的功能
      var option1 = {
        backgroundColor: "#fff",
        title: {
          text: "小区分布统计",
          left: "center",
          top: "2%",
          textStyle: {
            fontSize: 22,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "4%",
          textStyle: {
            color: "#333", // 设置图例文字颜色
          },
        },
        toolbox: {
          show: true,
          top: 10,
          right: 10,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "小区分布",
            type: "pie",
            radius: "65%",
            data: [
              {
                value: this.ecpai[0].value,
                name: "A区",
                itemStyle: {
                  color: "#DBECFF", // 设置颜色
                },
              },
              {
                value: this.ecpai[1].value,
                name: "B区",
                itemStyle: {
                  color: "#B8F4A8",
                },
              },
              {
                value: this.ecpai[2].value,
                name: "C区",
                itemStyle: {
                  color: "#4D9DFF",
                },
              },
              {
                value: this.ecpai[3].value,
                name: "D区",
                itemStyle: {
                  color: "#F2DE68",
                },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart1.setOption(option1);
      // 柱状图
      var option2 = {
        backgroundColor: "#fff",
        // 标题
        title: {
          text: "车位费/已分配/已缴费",
          top: "2%",
          left: "2%",
          textStyle: {
            color: "#333",
            fontSize: 16,
            fontWeight: "bold",
          },
        },
        // 图例
        legend: {
          show: true,
          data: ["车位数", "已分配量", "已缴费量"],
          top: "2%",
          right: "10%",
          textStyle: {
            color: "#333",
            fontSize: 12,
          },
        },
        // X 轴
        xAxis: {
          type: "category",
          data: ["A区车费", "B区车费", "C区车费", "D区车费"],
        },
        // Y 轴
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#333",
              width: 2,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#eee",
              type: "dashed",
            },
          },
        },
        // 数据系列
        series: [
          {
            name: "车位数",
            data: this.car1,
            label: {
              show: true,
              position: "top",
              color: "#5A70C7",
              fontSize: 14,
              fontWeight: "normal",
            },
            itemStyle: {
              color: "#5A70C7",
            },
            type: "bar",
          },
          {
            name: "已分配量",
            data: this.car2,
            label: {
              show: true,
              position: "top",
              color: "#98CC72",
              fontSize: 14,
              fontWeight: "normal",
            },
            itemStyle: {
              color: "#98CC72",
            },
            type: "bar",
          },
          {
            name: "已缴费量",
            data: this.car3,
            label: {
              show: true,
              position: "top",
              color: "#DAB7FB",
              fontSize: 14,
              fontWeight: "normal",
            },
            itemStyle: {
              color: "#DAB7FB",
            },
            type: "bar",
          },
        ],
      };
      myChart2.setOption(option2);
      // 雷达图
      var option3 = {
        backgroundColor: "#fff",
        tooltip: {
          // show: false // 弹层数据去掉
        },
        // 标题
        title: {
          text: "缴费项目订单",
          right: "5%", // 标题位置（右侧 5%）
          textStyle: {
            color: "#333",
            fontSize: 22,
            fontWeight: "bold",
          },
        },
        // 图例
        legend: {
          show: true,
          data: ["计费项目"], // 图例数据，与 series.data.name 对应
          left: "10%", // 图例位置（左侧 10%）
          textStyle: {
            color: "#333",
            fontSize: 12,
          },
        },
        radar: {
          center: ["50%", "50%"], // 外圆的位置
          radius: "78%",
          axisName: {
            name: {
              color: "#999",
              fontSize: 12,
              fontWeight: 400,
            },
          },
          indicator: [
            { name: "电费单", max: this.max },
            { name: "税费固定月单", max: this.max },
            { name: "水费按量单", max: this.max },
            { name: "天然气单", max: this.max },
            { name: "物业费单", max: this.max },
            { name: "宽带费单", max: this.max },
          ],
          splitArea: {
            show: true,
            areaStyle: {
              color: ["#FDEEF3"],
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.7)",
            },
          },
          splitLine: {
            lineStyle: {
              type: "solid",
              color: "#D2D0D0",
              width: 1,
            },
          },
        },
        series: [
          {
            type: "radar",
            symbolSize: 6,
            symbol: "circle",
            label: {
              show: true,
              color: "#78BBF",
              fontSize: 10,
              fontWeight: "normal",
            },
            data: [
              {
                value: this.radar,
                name: "计费项目", // 与 legend.data 对应
                areaStyle: {
                  color: "#78BBFF",
                  opacity: 0.8,
                },
                lineStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#00A2FF" },
                    { offset: 1, color: "#0060FF" },
                  ]),
                  width: 1,
                },
                itemStyle: {
                  color: "#39B2FF", // 数据点填充颜色（图例会继承此颜色）
                  borderColor: "#7FBEF8", // 圆点边框颜色
                  borderWidth: 2, // 圆点边框宽度
                },
              },
            ],
          },
        ],
      };
      myChart3.setOption(option3);
      // 折线图

      let XData = this.days;
      let valueData = {
        data1: this.nums,
      };
      const option4 = {
        backgroundColor: "#fff",
        toolbox: {
          show: true,
          top: 10,
          right: 10,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
            magicType: { type: ["line", "bar"] },
            dataZoom: {},
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["用户访问量"], // 只显示保留的系列名称
        },
        grid: {
          top: "18%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: "80%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: XData,
          axisLine: {
            lineStyle: {
              color: "rgba(193, 207, 220, 1)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0, 0, 0, 1)",
            },
          },
        },
        yAxis: [
          {
            name: "单位(mm)",
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(0, 0, 0, 1)",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#cdd5e2",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(193, 207, 220, 1)",
              },
            },
          },
        ],
        series: [
          {
            name: "用户访问量",
            type: "line",
            data: valueData.data1,
            symbolSize: 9, // 标记的大小
            lineStyle: {
              normal: {
                width: 2,
                color: "#16A1FA",
                shadowColor: "rgba(22, 161, 250, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(22, 161, 250, 1)",
              },
            },
            smooth: true,
          },
        ],
      };
      myChart4.setOption(option4);
    },
  },
};
</script>
 
<style scoped>
.home {
  background-color: #f0f0f0;
}
.announcement {
  padding-top: 56px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-width: 1400px;
  background-color: #fff;
}
.announcement > .left {
  width: 200px;
  text-align: left;
  padding-left: 16px;
  line-height: 60px;
  font-weight: 700;
  color: #4995f7;
  font-size: 14px;
}
.announcement > .right {
  width: 260px;
}

.fa-user {
  padding-top: 20px;
  font-size: 66px;
  color: #4995f7;
}
.fa-file-text-o {
  padding-top: 20px;
  font-size: 66px;
  color: #b4e765;
}
.fa-car {
  padding-top: 20px;
  font-size: 66px;
  color: #e4b200;
}
.fa-pencil-square-o {
  padding-top: 20px;
  font-size: 66px;
  color: #ae8b7c;
}
.topone {
  display: inline-block;
  width: 100%;
  color: black;
}
.toptwo {
  display: inline-block;
  width: 100%;
  color: black;
}
.topthree {
  display: inline-block;
  width: 100%;
  color: black;
}
.topfour {
  color: #4995f7;
  cursor: pointer;
  width: 10%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 60px;
  margin: 0;
}
.medium {
  /* background-color: #b94646; */
  display: flex;
}

/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */

/* 系统数据展示 */
.caard {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.caard-list {
  width: 25%;
  height: 112px;
  background-color: rgb(255, 255, 255);
  margin: 14px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  transition: 0.3s;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
.caard-list > .left {
  width: 100%;
  line-height: 112px;
  text-align: center;
}
.caard-list > .right {
  width: 100%;
  line-height: 60px;
  text-align: left;
  padding-top: 10px;
}
.caard-list > .right > p {
  line-height: 20px;
}
/* 图表 */
.ec {
  width: 100%;
  height: 600px;
  background-color: #ebeef5;
  display: flex;
  flex-direction: column;
}
.ec > .ec-top {
  display: flex;
  justify-content: space-around;
}
.ec > .ec-top > div {
  margin: 10px;
}
.ec > .ec-bottom {
  width: 100%;
  height: 270px;
  display: flex;
  justify-content: space-around;
}
.ec > .ec-bottom > div {
  margin: 10px;
}
.ec > .ec-bottom > .ec5 {
  width: 40%;
  height: 270px;
  background-color: #fff;
  overflow: hidden;
  padding: 15px 20px 10px 20px;
  box-sizing: border-box;
}
.ec > .ec-bottom > .ec5 > .pagbottom {
  display: flex;
  justify-content: space-around;
}
#one {
  width: 100%;
  height: 290px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
#two {
  width: 100%;
  height: 290px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
#three {
  width: 100%;
  height: 290px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
#four {
  width: 100%;
  height: 270px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
</style>